<template>
  <div class="order-page">
    <div v-if="hasOrder">
      <ul class="order-list">
        <li v-for="(item, idx) in orderList" :key="idx">
          <div class="h-20 bc-f2"></div>
          <div class="order-info">
            <span class="order-id">订单号：{{item.orderNumber}}</span>
            <span class="order-date">{{item.createTime}}</span>
          </div>
          <div class="order-content">购买内容：{{item.goodsName}}</div>
          <div class="order-money">购买金额：{{item.goodsPrice/100}}元</div>
        </li>
      </ul>
      <div class="btn-group report-order btn-next-group" v-if="canBuyReport">
        <a href="javascript:;" class="btn btn-next" @click="payReportOrder()">购买报告</a>
      </div>
    </div>
    <div class="order-null-wrap txt-center" v-else>
      <img class="on-img" src="@/assets/images/order_null.png">
      <div class="on-txt">目前没有订单</div>
      <div class="btn-group btn-next-group">
        <a href="javascript:;" class="btn btn-next" @click="goPaymentPage()">去预约</a>
      </div>
    </div>
  </div>
</template>

<script>
import Api from '@/api/index.js'
import Utils from '@/common/utils.js'
export default {
  data () {
    return {
      orderList: [],
      hasProcess: true,
      userData: null,
      canBuyReport: false,
      hasOrder: true
    }
  },
  created () {
    this.userData = Utils.local('userData')
    this.getOrderList()
  },
  methods: {
    // 获取订单列表
    getOrderList () {
      let that = this
      Api.getOrderList().then(res => {
        let _hasProcess = false
        let _orderList = res.data.array
        _orderList.map((item, idx) => {
          if (item.goodsType === 107) {
            _hasProcess = true
          }
          item.createTime = item.createTime.split(' ')[0]
        })

        that.orderList = _orderList
        that.canBuyReport = _hasProcess && that.userData.studentClass === 3 && !that.userData.isReportPay
        that.hasOrder = _orderList.length > 0
      })
    },
    // 报告支付
    payReportOrder () {
      this.$router.push({name: 'goodsPay', query: {t: 'report'}})
    },
    // 跳转支付页面
    goPaymentPage () {
      this.$router.push({name: 'goodsPay', query: {t: 'all'}})
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/common/_vars.scss';
.order-list{
  li{
    border-bottom: 8px solid #f5f5f5;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    line-height: 24px;
    .order-info{
      position: relative;
      .order-date{
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .order-content{
      font-size: 16px;
    }
  }
}
.order-null-wrap{
  padding-top: 100px;
  .on-img{
    width: 130px;
    margin: 0 auto;
    display: block;
  }
  .on-txt{
    text-align: center;
    font-size: 14px;
    color: #999;
  }
}
.report-order{
  margin-bottom: 30px;
}
</style>
